<template>
	<view>
		<li-statistics @openPopup="openPopup" :fn="fn" :param.sync="param" :pageData.sync="pageData" :isLoaded.sync="isLoaded" :maxRange="7" v-on:afterLoaded="afterLoaded($event)">
			<template #li>
				<block v-if="isLoaded">
					<li-statistics-cards
						:cd="[
							{
								type: 2,
								list: [
									{
										text: `新增会员`,
										value: pageData.increaseCount
									},
									{
										text: `累计会员`,
										value: pageData.count
									}
								]
							},
							{
								type: 2,
								list: [
									{
										text: `到店消费会员`,
										value: pageData.consumeMember
									},
									{
										text: `消费订单金额`,
										value: pageData.consumeTotal
									}
								]
							}
						]"
					/>
					<li-statistics-chart v-show="!isShowCanvas" title="新增会员" type="line" :cd="chartData" />
					<li-statistics-chart v-show="!isShowCanvas" title="累计会员" type="line" :cd="chartData2" />
					<li-statistics-chart v-show="!isShowCanvas" title="到店消费会员" type="line" :cd="chartData3" />
					<li-statistics-chart v-show="!isShowCanvas" title="会员消费订单金额" type="line" :cd="chartData4" />
				</block>
			</template>
		</li-statistics>
	</view>
</template>

<script>
import date from '@/utils/date';
import liStatisticsMixin from '../../../mixins/liStatisticsMixin';

export default {
	mixins: [liStatisticsMixin],
	data: function () {
		return {
			navTitle: '会员分析',
			fn: 'GetPageReport',
			param: {
				dataTimeRange: [date.getDate(-6), date.getToday()],
				reportId: 305
			},
			chartData2: {},
			chartData3: {},
			chartData4: {}
		};
	},
	methods: {
		afterLoaded: function (e) {
			this.chartData = e.trend;
			let ecData = {
				categories: e.trend.map((item) => item.name),
				series: [
					{
						name: '',
						data: e.trend.map((item) => item.value)
					}
				]
			};
			this.chartData = JSON.parse(JSON.stringify(ecData));
			let ecData2 = {
				categories: e.trend.map((item) => item.name),
				series: [
					{
						name: '',
						data: e.trend.map((item) => item.increaseTotal)
					}
				]
			};
			this.chartData2 = JSON.parse(JSON.stringify(ecData2));
			let ecData3 = {
				categories: e.trend.map((item) => item.name),
				series: [
					{
						name: '',
						data: e.trend.map((item) => item.increaseConsumeMember)
					}
				]
			};
			this.chartData3 = JSON.parse(JSON.stringify(ecData3));
			let ecData4 = {
				categories: e.trend.map((item) => item.name),
				series: [
					{
						name: '',
						data: e.trend.map((item) => item.increaseConsumeMoney)
					}
				]
			};
			this.chartData4 = JSON.parse(JSON.stringify(ecData4));
		}
	}
};
</script>

<style lang="scss" scoped>
.item {
	border-radius: 8px;
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 20rpx;
	background-color: #fff;
}

.charts-box {
	width: 100%;
	height: 300px;
}

.sub-title {
	font-size: 18px;
	font-weight: bold;
	margin: 8px 0;
}
</style>
